<script lang="ts">
  import {
    update_node_style,
    type ExDrawNodeInfo,
    type NodeStyleInfo,
  } from "$lib/api/board/board_draw";
  import { get_user_session } from "$lib/api/user";
  import { request } from "$lib/utils/request";
  import { getContext } from "svelte";
  import { drawStore } from "../../store.svelte";
  import type { Store as ToastStore } from "@zag-js/toast";
  import { Modal } from "@skeletonlabs/skeleton-svelte";
  import { X } from "lucide-svelte";

  const toast: ToastStore = getContext("toast");

  const primaryColors: string[] = [
    "primary-50",
    "primary-100",
    "primary-200",
    "primary-300",
    "primary-400",
    "primary-500",
    "primary-600",
    "primary-700",
    "primary-800",
    "primary-900",
    "primary-950",
  ];

  const secondaryColors: string[] = [
    "secondary-50",
    "secondary-100",
    "secondary-200",
    "secondary-300",
    "secondary-400",
    "secondary-500",
    "secondary-600",
    "secondary-700",
    "secondary-800",
    "secondary-900",
    "secondary-950",
  ];

  const surfaceColors: string[] = [
    "surface-50",
    "surface-100",
    "surface-200",
    "surface-300",
    "surface-400",
    "surface-500",
    "surface-600",
    "surface-700",
    "surface-800",
    "surface-900",
    "surface-950",
  ];

  interface ModalProps {
    node: ExDrawNodeInfo;
    onClose: () => void;
  }
  let props: ModalProps = $props();

  let newStyle: NodeStyleInfo = $state({
    ...props.node.node_style,
  });

  let hasChange = $derived(
    newStyle.bg_color != props.node.node_style.bg_color ||
      newStyle.border_color != props.node.node_style.border_color ||
      newStyle.border_width != props.node.node_style.border_width ||
      newStyle.font_color != props.node.node_style.font_color ||
      newStyle.layer != props.node.node_style.layer,
  );

  async function updateStyle() {
    const sessionId = await get_user_session();
    await request(
      update_node_style({
        session_id: sessionId,
        board_id: drawStore.boardInfo?.board_id ?? "",
        draw_id: drawStore.drawId,
        node_id: props.node.node_id,
        node_style: newStyle,
      }),
    );
    toast.create({
      title: "成功",
      description: "更新样式成功！",
      type: "success",
    });
    props.onClose();
  }
</script>

<Modal
  open={true}
  triggerBase="btn preset-tonal"
  contentBase="card bg-surface-200-800 p-4 space-y-4 shadow-xl shadow-surface-500 w-[600px]"
  backdropBase="backdrop-none"
  closeOnEscape={false}
  closeOnInteractOutside={false}
  onOpenChange={(ev) => {
    if (!ev.open) {
      props.onClose();
    }
  }}
>
  {#snippet content()}
    <header class="flex justify-between">
      <h4 class="h4">修改节点样式</h4>
      <button
        type="button"
        class="btn preset-ghost-primary-500"
        onclick={() => props.onClose()}
      >
        <X />
      </button>
    </header>
    <main class="pt-0 pl-2 pr-2 pb-2">
      <div class="label">
        <span class="label-text mb-1">图层</span>
        <select
          class="select rounded-none bg-surface-100-900"
          bind:value={newStyle.layer}
        >
          <option value={0}>0</option>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
          <option value={6}>6</option>
          <option value={7}>7</option>
          <option value={8}>8</option>
          <option value={9}>9</option>
        </select>
      </div>
      {#if props.node.content.BasicImageContent == undefined}
        <div class="label">
          <span class="label-text mb-1">背景颜色</span>
          <div class="flex flex-wrap gap-2">
            {#each surfaceColors as color}
              <div
                role="none"
                class={`w-[20px] h-[20px] bg-${color} cursor-pointer ${newStyle.bg_color.endsWith(color) ? "border-4" : "border-1"} border-tertiary-500`}
                onclick={() => (newStyle.bg_color = `bg-${color}`)}
              ></div>
            {/each}
          </div>
        </div>
      {/if}

      {#if !(props.node.content.BasicSvgContent != undefined || props.node.content.BasicImageContent != undefined || props.node.content.TextContent != undefined)}
        <div class="label">
          <span class="label-text mb-1">边框颜色</span>
          <div class="flex flex-wrap gap-2">
            {#each [...primaryColors, ...secondaryColors, ...surfaceColors] as color}
              <div
                role="none"
                class={`w-[20px] h-[20px] bg-${color} cursor-pointer  ${newStyle.border_color.endsWith(color) ? "border-4" : "border-1"} border-tertiary-500`}
                onclick={() => (newStyle.border_color = `border-${color}`)}
              ></div>
            {/each}
          </div>
        </div>
      {/if}

      {#if !(props.node.content.BasicImageContent != undefined || props.node.content.TextContent != undefined)}
        <label class="label">
          <span class="label-text mb-1">边框大小</span>
          <select
            class="select rounded-none bg-surface-100-900"
            bind:value={newStyle.border_width}
          >
            <option value="border-1">1</option>
            <option value="border-2">2</option>
            <option value="border-3">3</option>
            <option value="border-4">4</option>
            <option value="border-5">5</option>
            <option value="border-10">10</option>
          </select>
        </label>
      {/if}

      {#if props.node.content.BasicImageContent == undefined}
        <div class="label">
          <span class="label-text">字体颜色</span>
          <div class="flex flex-wrap gap-2">
            {#each [...primaryColors, ...secondaryColors] as color}
              <div
                role="none"
                class={`w-[20px] h-[20px] bg-${color}  cursor-pointer  ${newStyle.font_color.endsWith(color) ? "border-4" : "border-1"} border-tertiary-500`}
                onclick={() => (newStyle.font_color = `text-${color}`)}
              ></div>
            {/each}
          </div>
        </div>
      {/if}
    </main>

    <footer class="flex justify-end gap-4 m-[10px]">
      <button
        type="button"
        class="btn preset-tonal"
        onclick={() => props.onClose()}>取消</button
      >
      <button
        type="button"
        class="btn preset-filled-primary-900-100"
        disabled={!hasChange}
        onclick={() => updateStyle()}
      >
        保存
      </button>
    </footer>
  {/snippet}
</Modal>
